<template>
	<view class="page-wrapper" :data-theme="theme">
		<view v-if="!loading && !loadingError">
			<!-- 城市 -->
		<view class="flex flex-col">
			<text class="title">{{city}}</text>
			<text class="sub-title">更新时间：{{ weathersData.date_time }}</text>
		</view>

		<!-- 实时天气 -->
		<view class="card">
			<text class="card-title">
				实时天气
			</text>
			<view class="card-body">
				<view class="" >
					<text class="">
					体感温度：{{ weathersData.realtime.sendibleTemp }}℃
				</text>
				<text class="mx-40">
					风力：{{ weathersData.realtime.wS }}
				</text>
				</view>
				<view class="my-30" >
					<text class="">
					天气：{{ weathersData.realtime.weather }}({{ weathersData.realtime.temp }}℃)
				</text>
				<text class="mx-40">
				紫外线：{{ weathersData.realtime.ziwaixian }}
				</text>
				</view>
				<text class="">
					更新时间：{{ weathersData.realtime.time }}
				</text>
			</view>
		</view>

		<!-- pm2.5 -->
		<view class="card">
			<text class="card-title">PM2.5</text>
			<view class="card-body flex flex-col">
				<text class="" space="false" decode="false">
					空气质量指数：{{weathersData.pm25.aqi }}({{ weathersData.pm25.quality }})
				</text>
				<text class="">
					空气质量全国排名: {{ weathersData.pm25.cityrank }}
				</text>
				<text class="" space="false" decode="false">
					更新时间：{{ weathersData.pm25.upDateTime }}
				</text>
			</view>
			<view class="card-body">
				<view class="card-sub-title">
					主要污染物
				</view>
			<view class="grid grid-cols-3 pm25-view">
				<view class="">
					<text class="">
						PM2.5：
					</text>
					<text class="pm25-view__value">
						{{ weathersData.pm25.pm25 }}
					</text>
				</view>
				<view class="">
					<text class="">
						PM10：
					</text>
					<text class="pm25-view__value">
						{{ weathersData.pm25.pm10 }}
					</text>
				</view>
				<view class="">
					<text class="">
						O3：
					</text>
					<text class="pm25-view__value">
						{{ weathersData.pm25.o3 }}
					</text>
				</view>
				<view class="">
					<text class="">
						No2：
					</text>
					<text class="pm25-view__value">
						{{ weathersData.pm25.no2 }}
					</text>
				</view>
				<view class="">
					<text class="">
						SO2：
					</text>
					<text class="pm25-view__value">
						{{ weathersData.pm25.so2 }}
					</text>
				</view>
				<view class="">
					<text class="">
						CO：
					</text>
					<text class="pm25-view__value">
						{{ weathersData.pm25.co }}
					</text>
				</view>
			</view>
			</view>
		</view>

		<!-- 生活指数 -->
		<view class="card">
			<text class="card-title">生活指数</text>
			<view class="card-body">
				<view class="flex flex-col my-30" v-for="item in weathersData.indexes" :key="item.name">
					<text class="weather-indexed__title">{{ item.name }}: {{ item.level }}</text>
					<text>{{ item.content }}</text>
				</view>
				</view>
			</view>

		<!-- 天气预报 -->
		<view class="card">
				<text class="card-title">未来一周天气预报</text>
				<view class="card-body">
					<view class="flex my-30 justify-between" v-for="item in weathersData.weathers" :key="item.date">
						<view class="">
							<text>{{ item.week }}</text>
						</view>
						<view class="weather-view flex item-center">
							<image class="weather-view__icon" mode="aspectFit" :src="`/static/icon/weathers/${theme}/${item.weather}.png`" />
							<text class="weather-view__name">{{ item.weather }}</text>
						</view>
						<view class="" >
							<text class="mx-20">日：{{item.temp_day_c}}℃</text>
							<text>夜：{{item.temp_night_c}}℃</text>
						</view>
					</view>
				</view>
		</view>
		</view>
		<view v-else class="weather-loading">
			<progress :percent="loadingPercent" stroke-width="5" border-radius="10" :duration="1" active @activeend="activeendHandler" />
		</view>
	</view>
</template>

<script>
import { apiGetWeathers } from '@/api/index'
	export default {
		name: 'Home',
		data() {
			return {
				loading: true,
				loadingError: true,
				loadingPercent: 0,
				city: '广州',
				weathersData: {
					city: '',
					// 更新时间
					date_time: '',
					// pm2.5数据
					'pm25': {},
					// 实时数据
					realtime: {},
					// 指数
					indexes: [],
					// 天气预报
					weathers: []
				}
			}
		},
		onReady() {
			this.getWhether(this.city)
		},
		methods: {
			async getWhether(city) {
				try {
					this.loading = true
					const data = await apiGetWeathers({ city })

					if (data === null) {
						uni.showModal({
							title: '请求频繁',
							content: 'api接口请求频繁，请稍后再试',
							showCancel: false
						}).then(() => {
							this.getWhether(this.city)
						})
						this.loadingError = true
						return
					}
					
					Object.assign(this.weathersData, this.generateWeatherData(data))
					this.setLoadingState(true)
				} catch (err) {
					console.error('获取天气数据失败', err) 
					uni.showModal({
						title: '获取天气数据失败',
						content: err.message,
					})
					this.setLoadingState(false)
				}
			},
			setLoadingState(isSuccess) {
				if (isSuccess) {
					this.loadingError = false
					this.loadingPercent = 100
				} else {
					this.loadingError = true
					this.loadingPercent = 0
				}
			},
			generateWeatherData(data) {
				return {
						city: data.city,
						date_time: data.info.date_time,
						'pm25': data.info['pm25'],
						realtime: data.info.realtime,
						indexes: data.info.indexes,
						weathers: data.info.weathers
					}
			},
			/**
			 * 等待进度条动画结束，再隐藏loading加载进度条
			 */
			activeendHandler() {
				this.loading = false
			},
			/**
			 * 下拉刷新
			 */
			onPullDownRefresh() {
				this.setLoadingState(false)
				this.getWhether(this.city).finally(() => uni.stopPullDownRefresh())
			}
		}
	}
</script>

<style lang="scss">
	.page-wrapper {
		padding: 40rpx;
	}
	.title {
		font-size: 60rpx;
		color: var(--text-color);
	}
	.sub-title {
		font-size: 32rpx;
		color: var(--text-secondary-color);
		margin-top: 10rpx;
	}
	.card {
		margin-top: 50rpx;
		padding: 30rpx;
		background-color: var(--bg-color);
		border-radius: 20rpx;
		box-shadow: var(--card-item-box-shadow);
		&:last-child {
			margin-bottom: 0;
		}

		&-title {
			font-size: 36rpx;
			color: var(--text-color)
		}
		&-sub-title {
			margin-bottom: 20rpx;
		}
		&-body {
			margin-top: 20rpx;
			font-size: 32rpx;
			color: var(--text-secondary-color);
			& > * {
				margin-bottom: 10rpx;
			}
		}
	}
	
	.weather-view {
		&__-name {
			color: var(--text-color-grey);
		}
		&__icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
	}
	.weather-indexed__title {
		font-size: 34rpx;
		color: var(--text-color);
		margin-bottom: 12rpx;
	}

	.pm25-view {
		grid-template-rows: 50rpx;
		&__value {
			color: var(--text-color-grey);
		}
	}

	.weather-loading {
		position: absolute;
		top: 50%;
		left: 10%;
		height: 100vh;
		width: 80%;
		transform: (-50%, -50%);
	}
</style>
